<template>
    <div class="input-list">
        <div class="title" v-show="showTitle">{{title}}</div>
        <div class="list">
            <div class="preview">
                <span class="pre-item" v-for="(item,index) in list" :key="index">{{item}}</span>
            </div>
            <div class="body" v-show="false">
                <span class="item" v-for="(item,index) in list" :key="index">{{item}}</span>
            </div>
        </div>
        <div class="input">
            <input type="text" v-model="current" style="width:60px;" placeholder="添加类目" />
        </div>
        <div class="btn" @click="addItem">添加</div>
    </div>
</template>

<script>
export default {
    name: "inputList",
    props: {
        title: {
            type: String,
            default: "标题"
        },
        showTitle: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            list: [],
            current: ""
        };
    },
    methods: {
        addItem() {
            this.list.push(this.current);
            this.current = "";

            this.$emit("update", this.list);
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.input-list {
    display: flex;
    height: 40px;
    align-items: center;
    & > div {
        margin-right: 10px;
    }

    .list {
        position: relative;
        max-width: 100px;
        height: 40px;

        .preview {
            position: relative;
            max-width: 100px;
            height: 40px;
            overflow: hidden;
            line-height: 40px;
            font-size: 13px;
            color: #777;

            .pre-item {
                display: inline-block;
                height: 20px;
                line-height: 20px;
                padding: 0 2px;
                background: #ddd;
                margin-right: 6px;
            }
        }

        .body {
            top: 40px;
            position: absolute;
            border: 1px solid #aaa;
            .item {
                display: block;
                font-size: 13px;
            }
        }
    }

    .input {
        input {
            padding: 5px 5px;
            border: 1px solid #888;
            outline: none;
        }
    }

    .btn {
        cursor: pointer;
        padding: 3px 8px;
        background: #07c160;
        color: #fff;
        font-size: 14px;
    }
}
</style>
